import { subscribeStore } from '../../stores/SubscribeStore';
import { observer } from 'mobx-react';
import { useEffect } from 'react';
import { Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import './Subscribe.scss';
import { scrollAnimation } from '../../utils/globalFuncs';
import { Modal } from 'antd';
import { Loading } from '../../components/Loading';
import Icons from '../../images/images';


export const Subscribe = observer(() => {
    useEffect(() => {
        subscribeStore.getData();
    }, []);
    if (subscribeStore.loading) {
        return <Loading />
    }
    return (
        <div className="subscribeWrapper">
            <div className="top"></div>
            <div className="info">
                <div className="indicate">
                    <img className='topIcon' src={Icons.subscribeIndicate} alt="" />
                    <div className="text"> 会员与订阅服务</div>
                    <div className="name">Memberships & Subscriptions</div>
                    <div className="icon" onClick={() => {
                        var info = document.getElementsByClassName('info')[0];
                        scrollAnimation(0, info.clientHeight);
                    }}>

                        <img className='arrow' src={Icons.arrow_down} alt="" />

                    </div>
                </div>
                <img className='subscribeBg' src={Icons.subscribeBg} alt="" />
            </div>
            <div className="packageList">
                {subscribeStore.list.map((l, i) => <div className="content">
                    <img className='index' src={Icons.pay_index} alt="" />
                    <div className="item">
                        <img className='bg' src={Icons[`payBg${i + 1}`]} alt="" />
                        <div className="description">{l.desc}</div>
                        <div className="price">
                            <div className="icon">
                                <div className="round"></div>
                                <div className="text">$</div>
                            </div>
                            <div className='title'>价格</div>
                            <div className='value'>{l.price}</div>
                        </div>
                        <div className="duration">
                            <div className="icon">
                                <div className="round"></div>
                                <div className="text">L</div>
                            </div>
                            <div className='title'>周期</div>
                            <div className='value'>{l.name}</div>
                        </div>
                        <div className="pay" onClick={() => {
                            if (l.isSubscribe === 1) {
                                if (l.isRenew === 1) {
                                    subscribeStore.showConfirm = true;
                                } else {
                                    subscribeStore.activateSubscribe(l.priceid);
                                }
                            } else {
                                subscribeStore.subscribe(l.priceid);
                            }
                        }}>
                            {subscribeStore.subscribeLoadingId === l.priceid ? <Spin indicator={<LoadingOutlined style={{ fontSize: 15 }} />} /> : (l.isSubscribe === 1 ? (l.isRenew ? '自动续费中' : '激活') : '订阅')}
                        </div>
                    </div>
                </div>)}

            </div>

            <Modal
                title="提示"
                visible={subscribeStore.showConfirm}
                onOk={subscribeStore.cancelSubscribe.bind(subscribeStore)}
                confirmLoading={subscribeStore.confirmLoading}
                onCancel={() => subscribeStore.showConfirm = false}
                okText='确定'
                cancelText='取消'
                centered={true}

                width={300}
            >
                <p>是否确定取消自动续费?</p>
            </Modal>
            {/* <Modal
                title="提示"
                visible={subscribeStore.showConfirm}
                onOk={subscribeStore.cancelSubscribe.bind(subscribeStore)}
                confirmLoading={subscribeStore.confirmLoading}
                onCancel={() => subscribeStore.showConfirm = false}
                okText='确定'
                cancelText='取消'
                centered={true}

                width={300}
            >
                <p>是否前往支付页面?（支付完成后，刷新页面可更新套餐信息）</p>
            </Modal> */}

        </div>
    )
});